<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-13 11:44:27
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-11-06 15:24:45
 * @FilePath: \票务管理\app\ticketing-management\vue-project\src\views\home\Control\index.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div class="control-container">
        <div class="searchMap">
            <a-input placeholder="输入身份证号" v-model:value="search.user" style="width: 180px;">
                <template #prefix>
                    <CalendarOutlined />
                </template>
            </a-input>
            <el-config-provider :locale="zhCn">
                <el-date-picker v-model="search.time" type="dates" placeholder="选择日期" style="width: 150px;" />
            </el-config-provider>
            <a-button style="width: 90px; background: #1BA9BA;color:#fff" @click="searchMap">
                <template #icon>
                    <SearchOutlined />
                </template>
                搜索
            </a-button>
        </div>
        <div id="bmap">
        </div>
        <ul class="btn-wrap" style="z-index: 99;">
            <li class="light btn" @click="addLineLayer">添加图层</li>
            <li class="night btn" @click="removeLineLayer">清除图层</li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {
    CalendarOutlined,
    SearchOutlined
} from '@ant-design/icons-vue';
import { ElMessageBox } from 'element-plus'; // 引入 Element Plus 的 MessageBox 组件


let bmap: any = window.BMapGL;


let map: any = null;
let lineLayer: any = null;

const searchtitle = ref('')

const search = reactive({
    user: "",
    time: ""
})

const searchMap = async () => {
    // 实例地图模版
    var map = new bmap.Map('bmap');
    // 坐标
    var point = new bmap.Point(116.306219, 40.049526);
    map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    // 获取自定义的起始点和终点坐标
    const startPoint = new bmap.Point(116.306219, 40.049526);
    const endPoint = new bmap.Point(116.316219, 40.059526)

}
onMounted(() => {
    map = new bmap.Map('bmap', {
        displayOptions: {
            poi: true,
            poiText: true
        }
    });
    var cityCtrl = new bmap.CityListControl();  // 添加城市列表控件
    // 创建点标记

    var point = new bmap.Point(116.306219, 40.049526);  //我的位置
    var marker = new bmap.Marker(point);
    // 创建信息窗口
    var opts = {
        width: 200,
        height: 100,
        title: '八维教育研修学院'
    };
    var infoWindow = new bmap.InfoWindow('地址：北京市海淀区东北旺南路50号附近', opts);
    // 点标记添加点击事件
    marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, point); // 开启信息窗口
    });
    map.addOverlay(marker);
    map.addControl(cityCtrl);
    map.centerAndZoom(point, 16);
    map.enableScrollWheelZoom(true);
})

// 添加路线图层
const addLineLayer = () => {
    // 创建驾车路线规划实例
    const driving = new bmap.DrivingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });
    const startPoint = new bmap.Point(116.306219, 40.049526); // 起始点经纬度
    const endPoint = new bmap.Point(116.316219, 40.059526); // 结束点经纬度

    // 发起驾车路线规划请求
    driving.search(startPoint, endPoint);

    // 创建起点和终点的标记
    const startMarker = new bmap.Marker(startPoint);
    const endMarker = new bmap.Marker(endPoint);

    // 监听驾车路线规划完成事件
    driving.setSearchCompleteCallback(function (results: any) {
        if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
            const plan = results.getPlan(0);  // 获取第一条方案
            const route = plan.getRoute(0); // 获取路线
            const path = route.getPath();
            // 创建连接起点和终点的线路
            const line = new bmap.Polyline([startPoint, endPoint], {
                strokeColor: 'red', // 线路颜色
                strokeWeight: 5, // 线路宽度
                strokeOpacity: 0.8, // 线路透明度
                strokeStyle: 'dashed', // 线路样式，可选值为solid（实线）、dashed（虚线）、dotted（点线）
                enableMassClear: true, // 是否在调用map.clearOverlays()时清除此覆盖物，默认为true
                enableEditing: false, // 是否启用线编辑，默认为false
                enableClicking: true, // 是否响应点击事件，默认为true
                icons: [], // 线路符号，可用于绘制虚线、箭头等效果
                geodesic: false, // 是否绘制大地线（默认为false）
                showDir: false, // 是否显示箭头方向（默认为false）
                lineJoin: 'round', // 线路连接处的样式，可选值为bevel（斜角）、round（圆角）、miter（尖角）
                lineCap: 'butt' // 线路端点的样式，可选值为butt（平直）、round（圆形）、square（方形）
            });
            // 将线路添加到地图中
            map.addOverlay(line);
            // 获取驾车路线规划时间
            var output = '从上地到西单坐公交需要：';
            // 弹框提示信息
            output += '总时长：' + plan.getDuration(true);  //获取时间
            output += '总路程：' + plan.getDistance(true);  //获取距离
            console.log(output)
        }
    });

    // 将起点、终点和线路添加到地图中
    // map.addOverlay(startMarker);
    // map.addOverlay(endMarker);
};
// 移除路线图层
const removeLineLayer = () => {
    map.removeNormalLayer(lineLayer);
};
</script>

<style scoped lang="scss">
::v-deep .citylist_popup_main {
    z-index: 998;
}

.control-container {
    width: 100%;
    height: 100%;
    position: relative;

    .searchMap {
        width: 430px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        z-index: 10;
        left: 10px;
        top: 50px;
    }

    #bmap {
        width: 100%;
        height: 600px;
    }
}
</style> 